<template>
  <div class="main">
    <div id="container" style="width: 100%;height: 500px;"></div>
    <div class="input-card" style="width: 120px">
      <button class="btn" @click="createPolygon()" style="margin-bottom: 5px">新建</button>
      <button class="btn" @click="polyEditor.open()" style="margin-bottom: 5px">开始编辑</button>
      <button class="btn" @click="polyEditor.close()">结束编辑</button>
    </div>
    {{path}}
  </div>
</template>

<script>

export default {
  name: 'dashboard',
  data() {
    return {
      map:null,
      polyEditor:null,
      path:[],
      polygonItem:[],
    }
  },
  created() {

  },
  mounted() {
    const This = this;
    This.map = new AMap.Map("container", {
      center: [116.471354, 39.994257],
      zoom: 16.8
    });
    This.map.setFitView();

    This.polyEditor = new AMap.PolygonEditor(this.map);
    This.polyEditor.on('add', function (data) {
      let paths=data.obj.getPath();
      var path=[]
      paths.forEach(v => {
        This.path.push([v.lng, v.lat])
      });
      // var polygon = data.target;
      // this.polyEditor.addAdsorbPolygons(polygon);
      // polygon.on('dblclick', () => {
      //   this.polyEditor.setTarget(polygon);
      //   this.polyEditor.open();
      // })
    })
  },
  methods:{
    createPolygon() {
      this.polyEditor.close();
      this.polyEditor.setTarget();
      this.polyEditor.open();
    }
  }
}
</script>


<style scoped lang="less">
</style>
